<template>
  <section>
    <el-form ref="form" :model="createCouponsForm" label-width="80px" style="padding-top:30px">
      <el-form-item label="标题">
        <el-input type="text" v-model="createCouponsForm.title"></el-input>
      </el-form-item>

      <el-form-item label="描述">
        <el-input type="text" v-model="createCouponsForm.desc"></el-input>
      </el-form-item>

      <el-form-item label="跳转">
        <template>
          <div style="width: 600px;display: inline-block;">
            <el-input type="text" v-model="createCouponsForm.jump_to"></el-input>
          </div>
          <a href="http://192.168.8.100:1312/" target="_blank" style="text-decoration:none;margin-left: 20px;">点击查看跳转说明</a>
          <span style="color: red;">(请严格遵循以下的示例地址，否则概不负责，为空时即为不跳转)</span>
          <p><span style="margin-left: 10px;color: orangered;">选择菜品：kkfarm://kaikai001.com?res=buy&page=choose_plant</span></p>
          <p><span style="margin-left: 10px;color: orangered;">预约线下：kkfarm://kaikai001.com?res=offline</span></p>
        </template>
      </el-form-item>

      <el-form-item label="类型">
        <template>
          <el-radio-group v-model="createCouponsForm.type">
            <el-radio :label="1">满减</el-radio>
            <el-radio :label="2">满折</el-radio>
            <el-radio :label="3">免单</el-radio>
          </el-radio-group>
        </template>
      </el-form-item>

      <el-form-item label="背景图">
        <template>
          <el-select v-model="createCouponsForm.background_img" placeholder="请选择">
            <el-option v-for="(item, index) in couponsBackgroundImg" :key="index" :label="item.label" :value="item.value">{{ item.label }}</el-option>
          </el-select>
        </template>
      </el-form-item>


      <el-form-item label="针对商品">
        <el-switch
          v-model="createCouponsForm.for_goods"
          on-value="all"
          off-value=""
          on-text="全局"
          off-text="指定">
        </el-switch>
        <font color="#FF4949"> * 这里如果指定的话输入格式为  <{菜品名1}><{菜品名2}> ,商品类为<{G商品id}>，
          <br/><{F-ALL}>菜品类可用，<{G-ALL}>商品类可用，<{C-ALL}>虚拟卡可用，<{T-ALL}>门票可用
        </font>
        <el-input type="text" v-model="createCouponsForm.for_goods" v-if="createCouponsForm.for_goods!='all'"></el-input>
      </el-form-item>

      <el-form-item label="功能">
        超过 <el-input-number v-model="createCouponsForm.discount_scale" :min="0"></el-input-number> 分, 
        <span v-if="createCouponsForm.type==1">
          减 <el-input-number v-model="createCouponsForm.discount_do" :min="0"></el-input-number> 分
        </span>
        <span v-else-if="createCouponsForm.type==2">
          售价乘 <el-input-number v-model="createCouponsForm.discount_do" :min="1" :max="99"></el-input-number> %,
          最多减 <el-input-number v-model="createCouponsForm.discount_max" :min="0"></el-input-number>分
        </span>
        <span v-else-if="createCouponsForm.type==3">
          <b color="#FF4949"> 免单 </b>
        </span>
      </el-form-item>

      <el-form-item label="投放数量">
        <el-switch
          v-model="createCouponsForm.num"
          on-value="-1"
          off-value="1"
          off-text="固定"
          on-text="无限">
        </el-switch>
        <el-input-number v-model="createCouponsForm.num" :min="1" v-if="createCouponsForm.num>0"></el-input-number>
        <font color="#FF4949"> * 这里指此优惠券投放的数量 </font>
      </el-form-item>

      <el-form-item label="领取规则">
        每天可领 <el-input-number v-model="createCouponsForm.pull_once" :min="1"></el-input-number> 张, 
        每人最多领取 <el-input-number v-model="createCouponsForm.pull_max" :min="1"></el-input-number> 张
      </el-form-item>

      <el-form-item label="保质期">
        <el-switch
          v-model="switch_button.coupons_time"
          on-value="1"
          off-value="0"
          on-text="预约"
          off-text="固定">
        </el-switch>
        <div v-if="switch_button.coupons_time=='1'">
          <el-date-picker
            v-model="createCouponsForm.start_time"
            type="datetime"
            placeholder="开始时间">
          </el-date-picker>
          ~
          <el-date-picker
            v-model="createCouponsForm.end_time"
            type="datetime"
            placeholder="结束时间">
          </el-date-picker>
        </div>
        <div v-if="switch_button.coupons_time=='0'">
          <span style="display:none">
            {{ createCouponsForm.start_time = 0 }}
          </span>
          输入时长： <el-input-number v-model="createCouponsForm.end_time" :min="1"></el-input-number> 小时
        </div>
      </el-form-item>

      <el-form-item label="自动发放">
        <el-select v-model="createCouponsForm.auto" placeholder="请选择">
          <el-option
            v-for="item in switch_button.auto"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click.native="createCoupons" style="margin-top:40px">立即创建</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>
<script>
  import util from '../../util'
  import { apiTree } from '../../apiTree'
  export default {
    data() {
      return {
        createCouponsForm: {
          'title': '',
          'desc': '',
          'jump_to': '',
          'type': 1,
          'for_goods': 'all',
          'discount_scale': '',
          'discount_do': '',
          'discount_max': '',
          'num': '-1',
          'pull_once': '',
          'pull_max': '',
          'start_time': '',
          'end_time': '',
          'auto': '0'
        },
        switch_button: {
          'coupons_time': '1',
          'auto': [{
            value: '0',
            label: '手动'
          }, {
            value: '1',
            label: '全平台自动发放'
          }, {
            value: '2',
            label: '新用户注册发放'
          }]
        },
        couponsBackgroundImg: [
          {value: 'http://pic.kaikai001.com/public/20171113/5e3a39e0d', label: '满减卷'},
          {value: 'http://pic.kaikai001.com/public/20171113/215fedcdd', label: '满折卷'},
          {value: 'http://pic.kaikai001.com/public/20171113/6bb92717d', label: '免单卷'},
          {value: 'http://pic.kaikai001.com/public/20171113/b99f59bdd', label: '年度卷'},
          {value: 'http://pic.kaikai001.com/public/20171113/f34e1ba8d', label: '半年卷'},
          {value: 'http://pic.kaikai001.com/public/20171113/bf128124d', label: '季度卷'},
          {value: 'http://pic.kaikai001.com/public/20171113/1888dad1d', label: '月度卷'},
          {value: 'http://pic.kaikai001.com/public/20171113/4cab3f6d', label: '周卷'}
        ]
      }
    },
    methods: {
      // 修改时间
      formatTime(_time) {
        return util.formatDate.format(new Date(_time * 1000), 'yyyy-MM-dd hh:mm:ss');
      },
      createCoupons() {
        // var params = { this.createCouponsForm };
        var params=JSON.parse(JSON.stringify(this.createCouponsForm));
        // var params = this.createCouponsForm;
        // 保质期格式切换
        if (params.start_time == 0) {
          params.end_time = params.end_time * 60 * 60;
        } else {
          params.start_time = Math.ceil(new Date(params.start_time).getTime() / 1000)
          params.end_time = Math.ceil(new Date(params.end_time).getTime() / 1000)
        }
        if (!params.end_time) {
          this.$message({
            message: '保质期格式错误',
            type: 'error'
          });
          return;
        }
        if (util.isEmpty(params.title) || util.isEmpty(params.desc)) {
          this.$message({
            message: '描述不能为空',
            type: 'error'
          });
          return;
        }
        // 提交数据至服务器
        this.$confirm('优惠券一经添加立即生效，无法修改' , '很重要的提示', {
          confirmButtonText: '我已经核对好了，确定添加',
          cancelButtonText: '我还要再核对一遍',
          type: 'warning'
        }).then(() => {
          apiTree('coupons/add', 'coupons/create', params, 'POST').then((res) => {
            if (res.s === 1) {
              this.$message({
                message: '服务器处理完毕',
                type: 'success'
              })
              this.$router.push('/coupons/index');
            } else {
              this.$alert(res.err_str);
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '请仔细核对优惠券参数逻辑'
          });
        })
      }
    },
    mounted() {
      
    }
  }
</script>
